import React from 'react';
import { Chart, Geom, Axis, Tooltip } from 'bizcharts';

// eslint-disable-next-line react/prefer-stateless-function
class Basic extends React.Component {
  render() {
    const data = [
      {
        year: '17',
        value: 13,
      },
      {
        year: '18',
        value: 13,
      },
      {
        year: '19',
        value: 13,
      },
      {
        year: '20',
        value: 13,
      },
      {
        year: '21',
        value: 13,
      },
      {
        year: '22',
        value: 10,
      },
      {
        year: '23',
        value: 13,
      },
      {
        year: '01',
        value: 3,
      },
      {
        year: '02',
        value: 0,
      },
      {
        year: '03',
        value: 0,
      },
      {
        year: '04',
        value: 1,
      },
      {
        year: '05',
        value: 1,
      },
      {
        year: '06',
        value: 6,
      },
      {
        year: '07',
        value: 7,
      },
      {
        year: '08',
        value: 9,
      },
      {
        year: '09',
        value: 13,
      },
      {
        year: '10',
        value: 29,
      },
      {
        year: '12',
        value: 50,
      },
      {
        year: '13',
        value: 80,
      },
      {
        year: '14',
        value: 12,
      },
      {
        year: '15',
        value: 12,
      },
      {
        year: '16',
        value: 13,
      },
    ];
    const cols = {
      value: {
        min: 0,
      },
      year: {
        range: [0, 1],
      },
    };
    return (
      <div>
        <Chart height={250} data={data} scale={cols} forceFit padding={[30, 40, 40, 50]}>
          <Axis name="year" />
          <Axis name="value" />
          <Tooltip
            crosshairs={{
              type: 'y',
            }}
          />
          <Geom type="line" position="year*value" shape="smooth" size={2} />
        </Chart>
      </div>
    );
  }
}

export default Basic;
